<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			
			.one {
				/* 之前我们学习的盒子模型
				 宽和高设置的是内容的宽度和高度*/
				width: 300px;
				height: 300px;
				/* 此时盒子的大小变成了内容的宽或高加上border */
				border: 10px solid red;
				/* 此时盒子的大小变成了内容的宽或高加上border再加上padding */
				padding: 20px;
				/* 所以我们原来写代码的时候只要加上border/padding都会撑大盒子 */
				background-color: palegreen;
				box-sizing: content-box;
			}
			
			.two {
				/* 当我们的盒子模型使用border-box的时候
				 我们设置的宽和高就是内容加上border加上padding、
				 此时border和padding的设置就不会撑大盒子*/
				width: 300px;
				height: 300px;
				background-color: chartreuse;
				border: 10px solid red;
				padding: 20px;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
	</body>
</html>